<template>
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="日期">
              <el-date-picker
                v-model="createTimeCriteria"
                :default-time="['00:00:00','23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                class="w-100"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="日志类型">
              <el-select v-model="query.logType" placeholder="请选择类型">
<!--                <el-option label="操作日志" value="INFO" />-->
<!--                <el-option label="异常日志" value="ERROR" />-->
                <el-option label="分配" value="分配" />
                <el-option label="导出" value="导出" />
                <el-option label="审核" value="审核" />
                <el-option label="下达命令" value="下达命令" />
                <el-option label="配置" value="配置" />
                <el-option label="处理" value="处理" />
                <el-option label="登录" value="登录" />
                <el-option label="添加" value="添加" />
                <el-option label="修改" value="修改" />
                <el-option label="删除" value="删除" />
                <el-option label="启运" value="启运" />
                <el-option label="停运" value="停运" />
                <el-option label="提交" value="提交" />
                <el-option label="发布" value="发布" />
                <el-option label="下载" value="下载" />
                <el-option label="授权" value="授权" />
                <el-option label="验收" value="验收" />
                <el-option label="评价" value="评价" />
              </el-select>
            </el-form-item>
            <el-form-item label="关键字">
              <el-input v-model="query.blurry" placeholder="请输入用户名或描述" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSelect">查询</el-button>
              <el-button type="primary" @click="resetForm">重置</el-button>
              <el-button type="primary" @click="handleDel">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table-panel">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 300px)"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="80" />
            <el-table-column prop="username" label="操作人" show-overflow-tooltip />
            <el-table-column prop="logType" label="类型" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.logType === 'ERROR'" style="color: #e60012">异常日志</span>
                <span v-else-if="scope.row.logType === 'INFO'" style="color: #32b16c">操作日志</span>
                <span v-else style="color: #32b16c">{{scope.row.logType}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="requestIp" label="IP" show-overflow-tooltip />
            <el-table-column prop="address" label="IP来源" show-overflow-tooltip />
            <el-table-column prop="method" label="调用方法" show-overflow-tooltip />
            <el-table-column prop="description" label="详细信息" show-overflow-tooltip />
            <el-table-column prop="browser" label="浏览器" show-overflow-tooltip />
            <el-table-column prop="time" label="请求耗时" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
                <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
                <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="记录时间" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{ parseTime(scope.row.gmtCreate) }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getPage, del } from '@/api/system/log'
import { parseTime } from '@/utils'
import { getDatefmt } from '@/utils/common'

export default {
  name: 'LogPage',
  components: {
    Pagination
  },
  data() {
    return {
      dialog: false,
      tableLoading: false,
      query: {
        page: 1, limit: 10, total: 0, blurry: '', logType: ''
      },
      tableData: [],
      errorInfo: '',
      createTimeCriteria: [],
      ids: []
    }
  },
  created() {
    this.createTimeCriteria = []
    const date = new Date()
    this.$set(this.createTimeCriteria, 1, getDatefmt(date, 'yyyy-MM-dd') + ' 23:59:59')
    this.$set(this.createTimeCriteria, 0, getDatefmt(new Date(new Date().setDate(date.getDate() - 1)), 'yyyy-MM-dd') + ' 00:00:00')

    this.initData()
  },
  methods: {
    parseTime,
    initData() {
      const query = JSON.parse(JSON.stringify(this.query))
      query.page = query.page - 1
      query.startTime = this.createTimeCriteria[0]
      query.endTime = this.createTimeCriteria[1]
      this.tableLoading = true
      getPage(query).then(result => {
        this.tableLoading = false
        this.query.total = result.data.total
        this.tableData = result.data.list
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSelectionChange(val) {
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log(data)
    },
    // 查询
    handleSelect() {
      this.query.page = 1
      this.initData()
    },
    // 删除
    handleDel() {
      if (this.ids.length < 1) {
        this.$message({
          type: 'warning',
          message: '请至少选择一条数据'
        })
      } else {
        this.$confirm('确认删除此数据?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(this.ids).then(result => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.handleSelect()
          }).catch(() => {
          })
        }).catch(() => {
        })
      }
    },
    resetForm() {
      this.query = {
        ...this.query,
        blurry: '', logType: ''
      }
      this.createTimeCriteria = []
    },
    // 导出
    handleExport() {}
  }
}
</script>

<style lang="scss" scoped>
</style>
